<!DOCTYPE html>
<html>
<head>
    <#import "../common/common.macro.ftl" as netCommon>
    <title>${title!"艺术上海"}</title>
    <meta charset="utf-8" />
    <meta name="keywords" content="${keywords?if_exists}" />
    <meta name="description" content="${description?if_exists}" />
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <link href="/static/css/ui.css" rel="stylesheet" />
    <link href="/static/css/common/index.css" rel="stylesheet" />
    <link href="/static/css/bootstrap.css" rel="stylesheet" />

    <link href="/static/css/font/font-awesome.min.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/static/css/verify.css">
    <style>
        .login-containter{
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #c1c2c3;
            background-image: url("https://artshanghai.oss-cn-shanghai.aliyuncs.com/bg333333.jpg");
            background-repeat: no-repeat;
            background-size: cover;
        }
        .login-containter-mask{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0,0,0,0.5);
        }
        .login-containter-box{
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .login-box{
            background-color: #fff;
            width: 400px;
            height: 460px;
            padding: 26px;
        }
    </style>
</head>
<body>

<div class="login-containter">
    <div class="login-containter-mask"></div>
    <div class="login-containter-box">
        <div id="mpanel4" style="margin-top:50px;">
        </div>
        <div class="login-box">
            <img src="/static/img/header/logo.png" style="width: 60%; margin: 0 auto" />
            <h4 style="margin: 10px 0px;text-align: left">手机登录/注册</h4>
            <button class="btn btn-primary btn-block"  style="visibility: hidden" id="verifyBtn">发送</button>

                <div class="form-row">
                    <div class="col form-group">
                        <label>手机号码</label>
                        <input type="number" maxlength="11" id="mobile" class="form-control" value="">
                    </div>


                </div>

                <div class="form-row">
                    <div class="col form-group">
                        <label>验证码</label>
                        <input type="number" id="vcode" maxlength="4" class="form-control" value="">
                    </div>
                    <div class="col form-group">
                        <label>&nbsp;</label>
                        <button class="btn btn-primary btn-block" id="postBtn">发送</button>

                    </div>

                </div>
                <button class="btn btn-primary btn-block" id="confirmBtn" >登录</button>

        </div>
    </div>

</div>

<@netCommon.commonScript />


<script src="/static/js/common.js"></script>
<script src="/static/js/crypto-js.js"></script>
<script src="/static/js/ase.js"></script>
<script src="/static/js/verify.js" ></script>
<script>
    var phone = '';
    function validatorTel(content){
        // 正则验证格式
        eval("var reg = /^1[34578]\\d{9}$/;");
        return RegExp(reg).test(content);
    }
    var InterValObj; //timer变量，控制时间
    var count = 120; //间隔函数，1秒执行
    var curCount;//当前剩余秒数
    var returnUrl = ''

    function sendMessage() {
        curCount = count;
        //设置button效果，开始计时
        $("#postBtn").attr("disabled", "true");
        $("#postBtn").html("请在" + curCount + "秒内输入验证码");
        InterValObj = window.setInterval(SetRemainTime, 1000); //启动计时器，1秒执行一次
    }

    //timer处理函数
    function SetRemainTime() {
        if (curCount == 0) {
            window.clearInterval(InterValObj);//停止计时器
            $("#postBtn").removeAttr("disabled");//启用按钮
            $("#postBtn").html("重新发送");
        }
        else {
            curCount--;
            $("#postBtn").html(curCount + "秒后重发");
        }
    }
    $(function () {
        debugger;
        returnUrl = getQueryVariable('returnUrl')
        //console.log(encodeURIComponent('http://www.qq.com'));
        $("#postBtn").click(function(){
            var mobile = $('#mobile').val()
            if(validatorTel(mobile)){
                $("#verifyBtn").trigger('click')
            }
        })
        $("#confirmBtn").click(function(){
            var mobile = $('#mobile').val()
            var vcode =$('#vcode').val()
            var param = {
                vcode: vcode,
                mobile: mobile
            }
            $.ajax({
                type: "POST",
                url: baseUrl+"api/user-center/app/user/login/login2RegByMobile2Code",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                headers: {
                    'lbv': '1.0',
                    'tenant' : 'PTC'
                },
                data: JSON.stringify(param),
                success: function (res) {
                    //sendMessage();
                    if(res && res.code && res.code=='0' && res.data){
                        debugger
                        // $.cookie('token', res.data.token);
                        // $.cookie('userInfo',JSON.stringify(res.data))
                        localStorage.setItem('token', res.data.token)
                        localStorage.setItem('userInfo', JSON.stringify(res.data))

                        alert('登录成功')
                        if(returnUrl && returnUrl!==''){
                           var url =  decodeURIComponent(returnUrl)
                            window.location.href=url
                        }
                    }else {
                        alert(res.msg)
                    }
                },
                error: function (res) {

                }
            });
        })


        $('#mpanel4').pointsVerify({
            baseUrl: baseUrl+'api/user-center/app/user/captcha/getCaptcha',  //服务器请求地址, 默认地址为安吉服务器;
            containerId:'verifyBtn', // pop模式 必填 被点击之后出现行为验证码的元素id
            mode:'pop',
            imgSize : {       //图片的大小对象
                width: '400px',
                height: '200px',
            },
            ready : function() {

            },
            success : function(params) {
                debugger;
                if(params.captchaVerification){
                    var param = {
                        captchaVerification : params.captchaVerification,
                        mobile:$('#mobile').val()
                    }
                    $.ajax({
                        type: "POST",
                        url: baseUrl+"api/user-center/app/user/vcode/sendLoginVCode",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        headers: {
                            'lbv': '1.0',
                            'tenant' : 'PTC'
                        },
                        data: JSON.stringify(param),
                        success: function (res) {
                            sendMessage();
                            if(res && res.code && res.code=='0'){
                                //sendMessage()
                                alert('已发送短信')
                            }else {
                                alert(res.msg)
                            }
                        },
                        error: function (res) {

                        }
                    });
                }
                //返回的二次验证参数 合并到验证通过之后的逻辑 参数中回传服务器
            },
            error : function() {
                debugger;
            }
        });

    })

</script>


</body>


</html>
